<template>
<div class="content">
    <mt-header fixed title="添加设备">
            <div slot="left">
                <mt-button icon="back" @click.native="goback()">返回</mt-button>
            </div>
        </mt-header>
    <mt-cell title="设备id" :value="deviceid"></mt-cell>
    <mt-field label="地址" placeholder="请输入该设备地址" v-model="location"></mt-field>
    <div class="upload">
        <p>上传设备图片:</p>
        <input ref="file"
           type="file"
           class="file-input"
           accept="image/*"
           @change="change"/>
</div>
<div class="bottom"><mt-button type="primary" @click.native="submit" >确认添加</mt-button></div>
</div>

</template>
<script>
import { Toast } from 'mint-ui'
export default {
  data () {
    return {
      deviceid: '',
      adress: '',
      location: '',
      Imagesshot: ''
    }
  },
  created () {
    this.deviceid = this.$route.deviceid
  },
  computed: {
    siteid () {
      return this.$store.state.user.sitelist[0].siteid
    }
  },
  methods: {
    goback () {
      this.$router.go(-1)
    },
    change (el) {
      console.log(el)
      let file = el.target.files[0]
      this.upload(file)
    },
    async upload (file) {
      let param = new FormData() // 创建form对象
      param.append('file', file, file.name)// 通过append向form对象添加数据
      let config = {headers: {'Content-Type': 'multipart/form-data'}}
      const res = await this.$store.dispatch('upload', param, config)
      if (res.status === '0') {
        this.Imagesshot = res.context
      }
    },
    async submit () {
      debugger
      if (!this.location) {
        Toast('请输入详细地址！', 1500)
        return
      }
      if (!this.Imagesshot) {
        Toast('请上传图片！', 1500)
        return
      }
      const param = {
        location: this.location,
        Imagesshot: this.Imagesshot,
        devicecategoryid: this.$route.query.devicecategoryid,
        siteid: this.siteid,
        deviceid: this.$route.query.deviceid
      }
      const res = await this.$store.dispatch('addevice', param)
      if (res.status === '0') {
        Toast({
          message: '创建成功',
          duration: 2000
        })
        this.$router.push('/home')
      }
    }
  }

}
</script>
<style lang="less" scoped>
.content{
    padding-top: 40px;
}
.upload{
 padding: 10px;
 font-size: 16px;
 p{
     height: 30px;
     line-height: 30px;
 }
 input{
     padding: 0;
 }
}
.bottom{
    margin-top: 10px;
   text-align: center
}

</style>
